<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:0;height:50px;background: red;position: absolute;left:0;top:0;color: #fff;text-align: center;line-height:50px;}
        .line{width:1px;height:400px;background: black;position: absolute;left:400px;top:0;}


        .alert{width:300px;height:200px;background: #efefef;position: absolute;left:100px;top:100px;display: none;}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="line"></div>

    <input type="button" id="start" value="开始">


    <div class="alert">
        <h2>这是弹出框</h2>
        <div class="cont">
            这是内容区域
        </div>
        <input type="button" value="确定" id="submit">
        <input type="button" value="取消" id="cancel">
    </div>
</body>
<script>

    const obox = document.querySelector(".box");
    const ostart = document.querySelector("#start");

    const target = 400;
    let speed = 3;
    let t;

    ostart.onclick = function(){
        clearInterval(t);
        t = setInterval(()=>{
            if(target - obox.offsetWidth < speed){
                clearInterval(t);
                obox.style.width = target + "px";
                obox.innerHTML = "100%";

                show();

            }else{
                obox.style.width = obox.offsetWidth + speed + "px";
                // 计算百分比：取整(当前值 / 总值 * 100)
                obox.innerHTML = parseInt((obox.offsetWidth / target) * 100) + "%";
            }
        }, 30)
    }


    // 面向对象编程
    // 模块化编程
    // 组件式编程
    function show(){
        const oalert = document.querySelector(".alert");
        const osubmit = document.querySelector("#submit");
        const ocancel = document.querySelector("#cancel");
        let state = null;
        osubmit.onclick = function(){
            oalert.style.display = "none";
            state = true
        }
        ocancel.onclick = function(){
            oalert.style.display = "none";
            state = false
        }
        oalert.style.display = "block";
    }
    
</script>
</html>